<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.Statement" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="java.util.List"%>
<%@ page import="com.db.PassageDao" %>
<%@ page import="com.bean.*" %>
<html>
<meta charset="utf-8"> 
<head>
    <title>游记列表</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <!-- Custom Theme files -->
    
    <!--menu-->
    <script src="js/scripts.js"></script>
    <link href="css/styles.css" rel="stylesheet">
    <!--//menu-->
    
    <!--theme-style-->
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <!--//theme-style-->
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Real Home Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

<!-- 游记展示的样式 -->

<style>  
.nobreak   
{  
  word-wrap: break-word; word-break: normal; width:100%;
}  
</style> 


</head>
<body>

<!--header-->
<div class="navigation">
    <div class="container-fluid">
        <nav class="pull">
            <ul>
                <li><a  href="index.jsp">主页</a></li>
                <li><a  href="travelList.jsp?page=1">驴友游记</a></li>
                <li><a  href="share.jsp">发布游记</a></li>
            </ul>
        </nav>
    </div>
</div>

<div class="header"  style="background-color:#AAE48B;">
    <div class="container">
        <div class="top-nav">
            <ul class="right-icons">

                <!--根据是否登录显示-->
                <li>
                    <% if(session.getAttribute("user") == null){ %>
                    <a  href="login.jsp">
                        <i class="glyphicon glyphicon-user">
                        </i>Login</a></li>
                <% } else {
                    //获取用户名name
                    int ID = ((User)(session.getAttribute("user"))).getUsername();
                    String name = ((User)(session.getAttribute("user"))).getName();%>
                <a  onclick="window.location.href='UserServlet?method=admin&ID=<%=ID%>'">
                    <i class="glyphicon glyphicon-user">
                    </i><%=name%></a></li>
                <% }
                %>

            </ul>

            <div class="nav-icon">
                <div class="hero fa-navicon fa-2x nav_slide_button" id="hero">
                    <a href="#"><i class="glyphicon glyphicon-menu-hamburger"></i> </a>
                </div>
            </div>

            <link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/>
            <script src="js/jquery.magnific-popup.js" type="text/javascript"></script>


            <script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
            <script type="text/javascript">
                $(document).ready(function () {
                    $('#horizontalTab').easyResponsiveTabs({
                        type: 'default', //Types: default, vertical, accordion
                        width: 'auto', //auto or any width like 600px
                        fit: true   // 100% fit in a container
                    });
                });
            </script>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $('.popup-with-zoom-anim').magnificPopup({
                type: 'inline',
                fixedContentPos: false,
                fixedBgPos: true,
                overflowY: 'auto',
                closeBtnInside: true,
                preloader: false,
                midClick: true,
                removalDelay: 300,
                mainClass: 'my-mfp-zoom-in'
            });

        });
    </script>


</div>
<div class="clearfix"> </div>
<!--/导航条end/-->
<div class=" banner-buying">
    <div class=" container">
        <h3><span>游记</span></h3>


        <div class="clearfix"> </div>
        <!--initiate accordion-->
        <script type="text/javascript">
            $(function() {
                var menu_ul = $('.menu > li > ul'),
                    menu_a  = $('.menu > li > a');
                menu_ul.hide();
                menu_a.click(function(e) {
                    e.preventDefault();
                    if(!$(this).hasClass('active')) {
                        menu_a.removeClass('active');
                        menu_ul.filter(':visible').slideUp('normal');
                        $(this).addClass('active').next().stop(true,true).slideDown('normal');
                    } else {
                        $(this).removeClass('active');
                        $(this).next().stop(true,true).slideUp('normal');
                    }
                });

            });
        </script>

    </div>
</div>
<!--//header-->
<!--travelList-->
<div class="travelList" >
    <div class="container">
    	<!--筛选的三个框-->
	    	<form role="form" action="FilterPassageServlet" method = "post">
			  <div class="form-group">
			    <div class="input-group col-xs-5">
		            <select name="tcity" class="form-control" style="width: auto;">
		                <option value="%" selected>旅游城市</option>
		                <option value="武汉">武汉</option>
		                <option value="青岛">青岛</option>
		                <option value="广州">广州</option>
		                <option value="厦门">厦门</option>
		                <option value="洛阳">洛阳</option>
		            </select>
		            <select name="tdays" class="form-control" style="width: auto;">
		                <option value="default" selected>旅游天数</option>
		                <option value="2">1-3天</option>
		                <option value="3">3-7天</option>
		                <option value="4">一周以上</option>
		            </select>
		     		<select name="tcost" class="form-control" style="width: auto;">
		                <option value="default" selected>旅游经费</option>
		                <option value="2">0-1000元</option>
		                <option value="3">1000-5000元</option>
		                <option value="4">5000-10000元</option>
		                <option value="5">10000元以上</option>
		            </select>
		        <!-- 筛选按钮 -->
		        <span class="input-group-btn">
		            <button class="btn" id="submit" type="submit" style="background-color:#AAE48B;color:blue;" >
		            		筛选
		            </button>
		        </span>
		    	</div>
			  </div>
			</form>
			<br>
    	
    	
    	<!--筛选的三个框  end-->
              
                    <div style = "width:100%;"class="col-md-9 single-box">
                    <!-- ----重复每页的游记---- -->
                        <div class="nobreak">
	                        <!--连接Route数据库，动态生成网页-->
	                        <%
	                        	PassageDao connectPassageForNum = new PassageDao();
							    int resultNumber = connectPassageForNum.searchPassageNumber();
							%>
                            <!--根据数据库中的结果动态生成列表-->
                            <%
                                int time = 1;
                                int maxTime = 8;

                                int maxPageNum = (int)(Math.ceil((double)resultNumber/(double)maxTime));
                                String getID=new String(),getTitle=new String();
                                int getPassageID;
                                PassageDao connectPassage = new PassageDao();
                                Passage newPassage = new Passage();

                                //获取当前页面页码
                                int nowPage = Integer.parseInt(request.getParameter("page"));
                                time = time + (nowPage-1)*maxTime;

                                while((time-(nowPage-1)*maxTime)<=maxTime && time<=resultNumber)
                                {
                                    connectPassage.searchPassage(newPassage,time);
                            %>
                            <!-- ---------------------------- -->
                            <div style="float:left;margin:1;padding:0;width:50%; height:400px; ">
                                <div class=" col-sm-7 left-side "  style="color:#294819;">
                                    <a href="travelDetails.jsp?passageID=<%=newPassage.getPassageID()%>&page=1"> <img height="250" width="300" src="psgPhoto/image/image/<%=newPassage.getPassageID()%>_1.jpeg" alt=""></a>
                                </div>
                                <div class="  col-sm-5 middle-side">
                                    <h4><%=newPassage.getTitle()%></h4>
                                    <p>作者：<%=newPassage.getAuthorName()%></p>
                                    <p>城市：<%=newPassage.getCity()%></p>
                                    <p>天数：<%=newPassage.getDays()%></p>
                                    <p>
                                        <a href="travelDetails.jsp?passageID=<%=newPassage.getPassageID()%>&page=1" class="hvr-sweep-to-right more" >查看更多&gt;&gt;</a>
                                    </p>
                                </div>
                                
                            </div>
                            <!-- -------------------------------- -->
                            <%
                                    time++;
                                }
                            %>
					    </div>
					<!-- ----重复每页的游记---- -->

	</div>
</div>
</div>			
<!--//travelList-->
<!--翻页功能-->
<div class="nav-page">
    <nav>
        <ul class="pagination">
            <li><a href="travelList.jsp?page=1" aria-label="Previous" ><span aria-hidden="true">«</span></a></li>
            <%for(int m=1;m<=maxPageNum;m++){%>
            <% if(m==nowPage)
            {
            %>
            <li><a href="travelList.jsp?page=<%=m%>" class="active" ><%=m%><span class="sr-only">(current)</span></a></li>
            <% }else{%>
            <li><a href="travelList.jsp?page=<%=m%>" style="color:#000000"><%=m%></a></li>
            <%}
            }%>
            <li><a href="travelList.jsp?page=<%=maxPageNum%>" aria-label="Next" ><span aria-hidden="true">»</span></a></li>
        </ul>
    </nav>

</div>
</body>
</html>